<template>
    <div class="login_div" :class="{ 'num-part': num, 'code-part': code}">
        <div class="login-bg"></div>
        <div class="login-con">
            <div class="product-logo"><img onclick="return false" src="~/assets/image/logoicon.png"/></div>
            <section class="logins">
                <div class="inputs">
                    <div class="inputs">
                        <input v-model="telphone" type="tel" @focus="focusPart" @blur="blurPart" @input="telphone = telphone.replace(/[^\d]/g,'')" maxlength="13" class="username" ref="inputNum" required="required" placeholder="请输入手机号" />
                    </div>
                    <div class="verify-code clear">
                        <input v-model="codetel" type="number" ref="inputCode" @focus="focusPart" @blur="blurPart" placeholder="请输入验证码" />
                        <button href="javascript:;" v-if="show" @click="clickcode" :disabled="isDisable">{{getcodetext}}
                        </button>
                        <button href="javascript:;" v-else>{{count}}</button>
                    </div>
                    <a href="javascript:;" class="login-btn" @click="doLogin">登录</a>
                    <div class="user-know">
                        <div class="user-know-left">
                            <input type="checkbox" class="" v-model="checkState" />
                            <img src="~/assets/image/but_login_unchecked.png" v-if="!checkState" />
                            <img src="~/assets/image/but_login_checked.png" v-if="checkState" />
                        </div>
                        <div class="user-know-right">
                            <span>我已阅读同意遵守</span>
                            <router-link to="/userKnow">《用户注册须知》</router-link>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="login-cover" v-if="coverState">
            <div class="login-cover-bg" @click="coverState = false"></div>
            <div class="login-cover-con">
                <p>请阅读并同意遵守《用户注册须知》</p>
                <button @click="checkState = true,coverState = false">已阅读并同意</button>
                <img src="~/assets/image/but_close.png" @click="coverState = false" />
            </div>
        </div>
    </div>
</template>
<script>
import os from '~/assets/api/os'
import app from '~/assets/api/config'
// import { setStatusStyle } from '../util/notifaction.js'

export default {
    beforeCreate() {
        // document.getElementsByTagName("body")[0].className = "active";
    },
    beforeDestroy() {
        // document.body.removeAttribute("class", "active");
    },
    /* created() {
            setStatusStyle('#ffffff', "0");
        }, */
    watch: {
        telphone(newValue, oldValue) {
            if (newValue > oldValue) {
                var mLength = newValue.length
                if (mLength <= 3) {
                    this.telphone = newValue
                } else {
                    if (mLength <= 7) {
                        this.telphone =
                            newValue.substring(0, 3) +
                            ' ' +
                            newValue.substring(3, mLength)
                    } else {
                        this.telphone =
                            newValue.substring(0, 3) +
                            ' ' +
                            newValue.substring(3, 7) +
                            ' ' +
                            newValue.substring(7, mLength)
                    }
                }
            }
        }
    },
    data() {
        return {
            checkState: true,
            coverState: false,
            customizeClass: 'active', //控制body样式
            telphone: '', //手机号
            codetel: '', //验证码
            getcodetext: '获取验证码',
            count: '', //计时
            timer: null,
            show: true,
            isDisable: false,
            num: false,
            code: false,
            oldHeight: null,
            newHeight: null
        }
    },
    mounted() {
        localStorage.removeItem('token')
        localStorage.removeItem('selected')
        this.oldHeight = document.body.clientHeight
        // var forceLogin = localStorage.getItem('forceLogin');
        // if (forceLogin === 'false') {
        //     this.$router.push({ name: "Index" })
        //     return;
        // }
    },
    methods: {
        focusPart() {
            if (!os._ios()) {
                this.num = true
                window.onresize = () => {
                    this.newHeight = document.body.clientHeight
                    if (this.oldHeight - this.newHeight > 50) {
                        console.log(1)
                    } else {
                        this.num = false
                        this.$refs.inputNum.blur()
                        this.$refs.inputCode.blur()
                    }
                }
            }
        },
        blurPart() {
            this.num = false
        },
        doLogin() {
            // 登陆
            let reg = /^[1][3456789][0-9]{9}$/
            console.log(this.telphone);
            let teleph = this.telphone.replace(/\s+/g, '')
            console.log(teleph);
            if (teleph == '') {
                this.$Toast('请输入手机号码')
            } else if (this.codetel == '') {
                this.$Toast('请输入验证码')
            } else if (!reg.test(teleph)) {
                this.$Toast('请输入正确的手机号码')
            } else {
                if (this.checkState) {
                    this.$axios
                        .post(app.API_URL + '/1.0/users/login', {
                            mobile: teleph,
                            login_type: 1,
                            client_type: 1,
                            captcha: this.codetel,
                            business_type: 2
                        })
                        .then(res => {
                            if (res.data.code == 0) {
                                localStorage.setItem('token', res.data.data)
                                this.$router.push({ path: '/' });
                                var timestamp = Date.parse(new Date())
                                console.log(timestamp);
                                localStorage.setItem('loginTime', timestamp)
                            }
                        })
                } else {
                    this.coverState = true
                }
            }
        },
        clickcode() {
            //发送验证码
            let _that = this
            let tele = this.telphone.replace(/\s+/g, '')
            if (tele == '') {
                this.$Toast('请输入手机号码')
                return false
            }
            let reg = /^[1][3456789][0-9]{9}$/
            if (!reg.test(tele)) {
                this.$Toast('请输入正确的手机号码')
                return false
            }
            this.$axios
                .post(app.API_URL + '/1.0/captcha/send', {
                    mobile: tele,
                    type: 1,
                    client_type: 1,
                    business_type: 2
                })
                .then(function(res) {
                    if (res.data.code == '0') {
                        this.$Toast('发送成功')
                        const TIME_COUNT = 60
                        if (!_that.timer) {
                            _that.count = TIME_COUNT
                            _that.show = false
                            _that.timer = setInterval(() => {
                                if (
                                    _that.count > 0 &&
                                    _that.count <= TIME_COUNT
                                ) {
                                    _that.count--
                                } else {
                                    _that.show = true
                                    _that.getcodetext = '重新发送'
                                    clearInterval(_that.timer)
                                    _that.timer = null
                                }
                            }, 1000)
                        }
                    }
                })
        }
    }
}
</script>
<style scoped lang="less">
.login_div {
    position: relative;
    .login-bg {
        width: 100%;
        height: 525px;
        background: #fade6d;
        position: absolute;
        top: -82.5px;
    }
    .login-con {
        position: relative;
        z-index: 10;
    }
    .login-cover {
        position: fixed;
        z-index: 100;
        .login-cover-bg {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: #1e1e1e;
            opacity: 0.84;
        }
        .login-cover-con {
            position: fixed;
            z-index: 10;
            top: 50%;
            width: 580px;
            border-radius: 10px;
            padding-bottom: 50px;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            p {
                display: block;
                color: #1f1f1f;
                font-size: 32px;
                text-align: center;
                padding: 118.75px 0 75px;
            }
            img {
                position: absolute;
                display: block;
                top: 337.5px;
                left: 50%;
                transform: translateX(-50%);
                width: 72.5px;
                height: auto;
            }
            button {
                display: block;
                width: 427.5px;
                margin: 0 auto;
                height: 68.75px;
                border-radius: 62.5px;
                border: 0;
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFDF00', endColorStr='#FFCD00', gradientType='1');
                background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
                background: -o-linear-gradient(left, #ffdf00, #ffcd00);
                background: -webkit-gradient(
                    linear,
                    0% 0%,
                    100% 0%,
                    from(#ffdf00),
                    to(#ffcd00)
                );
            }
        }
    }
    .product-logo {
        text-align: center;
        padding-top: 112.5px;
        img {
            width: 185px;
            height: 185px;
        }
    }
    .logins {
        overflow: hidden;
        padding: 50px;
        margin: 50px 55px;
        background: #fff;
        box-shadow: 15px 13.75px 63.75px rgba(177, 186, 198, 0.16);
        border-radius: 10px;
        input {
            border: none;
        }
        .inputs {
            position: relative;
            margin-bottom: 62.5px;
            .username {
                border-bottom: 1.25px solid #f2f2f2;
                font-size: 28px;
                outline: none;
                height: 75px;
                -webkit-appearance: none;
                box-sizing: border-box;
                padding: 7.5px;
                width: 100%;
            }
        }
        .verify-code {
            width: 100%;
            input {
                width: 70%;
                outline: none;
                -webkit-appearance: none;
                float: left;
                font-size: 28px;
                height: 75px;
                border: none;
                box-sizing: border-box;
                padding: 7.5px;
                border-bottom: 1px #f6f8f9 solid;
            }
            button {
                outline: none;
                background: #fff;
                width: 30%;
                margin-top: 7.5px;
                float: left;
                height: 48px;
                line-height: 48px;
                font-size: 24px;
                text-align: center;
                color: #ffcd00;
                box-sizing: border-box;
                border: 1.25px solid #ffcd00;
                border-radius: 62.5px;
            }
        }
        .login-btn {
            display: block;
            height: 78px;
            font-size: 30px;
            line-height: 78px;
            text-align: center;
            margin-top: 180px;
            text-decoration: none;
            border: none;
            color: #1d0f00;
            border-radius: 62.5px;
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFDF00', endColorStr='#FFCD00', gradientType='1');
            background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
            background: -o-linear-gradient(left, #ffdf00, #ffcd00);
            background: -webkit-gradient(
                linear,
                0% 0%,
                100% 0%,
                from(#ffdf00),
                to(#ffcd00)
            );
            width: 100%;
        }
        .login-btn:active {
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ECC111', endColorStr='#E6C022', gradientType='1');
            background: -moz-linear-gradient(left, #ecc111, #e6c022);
            background: -o-linear-gradient(left, #ecc111, #e6c022);
            background: -webkit-gradient(
                linear,
                0% 0%,
                100% 0%,
                from(#ecc111),
                to(#e6c022)
            );
        }
        .user-know {
            margin-top: 37.5px;
            display: flex;
            justify-content: center;
            align-items: center;
            .user-know-left {
                position: relative;
                margin-right: 7.5px;
                input {
                    display: block;
                    width: 23px;
                    height: 23px;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    opacity: 0;
                }
                img {
                    display: block;
                    width: 23px;
                    height: 23px;
                }
            }
            .user-know-right {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: 2.5px;
                span {
                    display: block;
                    font-size: 20px;
                    color: #2e2e2e;
                }
                a {
                    display: block;
                    font-size: 20px;
                    color: #ffcd00;
                }
            }
        }
    }
}

@keyframes dropdown {
    0% {
        margin-top: 0;
    }
    to {
        margin-top: -200px;
    }
}
.num-part {
    -webkit-animation-name: dropdown;
    animation-name: dropdown;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
</style>
